Frontend Web Serial API: En Omfattende Guide til Kommunikation med Serielle Enheder i Browseren

Web Serial API åbner spændende nye muligheder for webapplikationer. Det giver din frontend-kode, der kører i en browser, mulighed for at kommunikere direkte med serielle enheder tilsluttet en brugers computer. Dette var tidligere forbeholdt native applikationer, men nu kan du interagere med mikrocontrollere, 3D-printere, sensorer og ældre hardware direkte fra din webbrowser. Forestil dig at styre en Arduino fra et web-baseret dashboard, overvåge sensordata i realtid eller interagere med en ældre seriel printer via en moderne webgrænseflade. Denne guide vil dykke ned i Web Serial API, udforske dets funktioner og give praktiske eksempler for at hjælpe dig i gang.

Hvad er Web Serial API?

Web Serial API er en webstandard, der giver webapplikationer en måde at kommunikere med serielle enheder på. Seriel kommunikation er en udbredt metode til udveksling af data mellem enheder ved hjælp af en seriel port. Dette er især almindeligt med indlejrede systemer, industrielt udstyr og ældre hardware. API'en bygger bro mellem nettet og den fysiske verden, hvilket gør det muligt for webapplikationer at interagere med disse enheder uden behov for browserudvidelser eller native applikationer.

Vigtigste fordele:

• Direkte Enhedsinteraktion: Eliminerer behovet for mellemliggende applikationer eller drivere til grundlæggende seriel kommunikation.
• Kompatibilitet på tværs af platforme: Webapplikationer, der bruger Web Serial API, kan køre på ethvert operativsystem med en kompatibel browser.
• Forbedret Sikkerhed: API'en er designet med sikkerhed for øje og kræver eksplicit brugertilladelse for at få adgang til serielle porte.
• Forenklet Udvikling: Giver en standardiseret grænseflade til seriel kommunikation, hvilket forenkler udviklingsprocessen.

Browserunderstøttelse

Pr. ultimo 2024 understøttes Web Serial API af Chromium-baserede browsere som Google Chrome, Microsoft Edge og Opera. Understøttelse i andre browsere som Firefox og Safari er under overvejelse og udvikling. Det anbefales at tjekke Can I use-webstedet for den seneste information om browserkompatibilitet.

Sikkerhedsovervejelser

Web Serial API prioriterer sikkerhed og brugerens privatliv. Her er nogle centrale sikkerhedsforanstaltninger:

• Brugertilladelse: Browseren vil bede brugeren om tilladelse, før en webapplikation får lov til at få adgang til en seriel port. Brugeren har mulighed for at give eller nægte adgang.
• Kun Sikre Kontekster: API'en er kun tilgængelig i sikre kontekster (HTTPS). Dette hjælper med at forhindre man-in-the-middle-angreb og sikrer dataintegritet.
• Begrænset Adgang: API'en giver kontrolleret adgang til den serielle port, hvilket begrænser potentialet for ondsindede aktiviteter.

Kom godt i gang: Et praktisk eksempel med Arduino

Lad os gennemgå et simpelt eksempel på brug af Web Serial API til at kommunikere med et Arduino-board. Dette eksempel vil demonstrere, hvordan man sender data fra webbrowseren til Arduinoen og modtager data tilbage.

Forudsætninger:

• Et Arduino-board (f.eks. Arduino Uno, Nano eller Mega).
• Arduino IDE installeret på din computer.
• Et USB-kabel til at forbinde Arduinoen til din computer.
• En browser, der understøtter Web Serial API (Chrome, Edge, Opera).

Trin 1: Arduino-kode

Først skal du uploade følgende kode til dit Arduino-board ved hjælp af Arduino IDE:

            void setup() {
 Serial.begin(9600);
}

void loop() {
 if (Serial.available() > 0) {
 String data = Serial.readStringUntil('\n');
 data.trim();
 Serial.print("Received: ");
 Serial.println(data);
 delay(100);
 }
}

            

              
                Copy
              
            
          

Denne kode initialiserer den serielle kommunikation med en baud rate på 9600. I `loop()`-funktionen tjekker den, om der er data tilgængelig på den serielle port. Hvis der er data tilgængelig, læser den dataene, indtil der modtages et nylinjetegn, fjerner eventuelle foranstillede eller efterfølgende mellemrum og sender derefter de modtagne data tilbage til den serielle port med præfikset "Received: ".

Trin 2: HTML-struktur

Opret en HTML-fil (f.eks. `index.html`) med følgende struktur:

            <!DOCTYPE html>
<html>
<head>
 <title>Web Serial API Example</title>
</head>
<body>
 <h1>Web Serial API Example</h1>
 <button id="connectButton">Connect to Serial Port</button>
 <textarea id="receivedData" rows="10" cols="50" readonly></textarea><br>
 <input type="text" id="dataToSend">
 <button id="sendButton">Send Data</button>
 <script src="script.js"></script>
</body>
</html>

            

              
                Copy
              
            
          

Denne HTML-fil indeholder en knap til at oprette forbindelse til den serielle port, et tekstområde til at vise modtagne data, et inputfelt til at indtaste data, der skal sendes, og en knap til at sende dataene. Den linker også til en JavaScript-fil (`script.js`), som vil indeholde Web Serial API-koden.

Trin 3: JavaScript-kode (script.js)

Opret en JavaScript-fil ved navn `script.js` med følgende kode:

            const connectButton = document.getElementById('connectButton');
const receivedDataTextarea = document.getElementById('receivedData');
const dataToSendInput = document.getElementById('dataToSend');
const sendButton = document.getElementById('sendButton');

let port;
let reader;
let writer;

connectButton.addEventListener('click', async () => {
 try {
 port = await navigator.serial.requestPort();
 await port.open({ baudRate: 9600 });

 connectButton.disabled = true;
 sendButton.disabled = false;

 reader = port.readable.getReader();
 writer = port.writable.getWriter();

 // Listen to data coming from the serial device.
 while (true) {
 const { value, done } = await reader.read();
 if (done) {
 // Allow the serial port to be closed later.
 reader.releaseLock();
 break;
 }
 // value is a Uint8Array.
 receivedDataTextarea.value += new TextDecoder().decode(value);
 }
 } catch (error) {
 console.error('Serial port error:', error);
 }
});

sendButton.addEventListener('click', async () => {
 const data = dataToSendInput.value + '\n';
 const encoder = new TextEncoder();
 await writer.write(encoder.encode(data));
 dataToSendInput.value = '';
});

            

              
                Copy
              
            
          

Denne JavaScript-kode håndterer forbindelsen til den serielle port, modtagelse af data og afsendelse af data. Lad os gennemgå koden:

• Hent Elementer: Den henter referencer til HTML-elementerne ved hjælp af deres ID'er.
• `connectButton` Klikhændelse: Når der klikkes på knappen "Connect to Serial Port", sker følgende:
  • Den kalder `navigator.serial.requestPort()` for at bede brugeren om at vælge en seriel port.
  • Den åbner den valgte port med en baud rate på 9600.
  • Den deaktiverer forbindelsesknappen og aktiverer send-knappen.
  • Den henter en læser og en skriver til portens læsbare og skrivbare streams.
  • Den går ind i en løkke for kontinuerligt at læse data fra den serielle port.
  • Den afkoder de modtagne data (som er en `Uint8Array`) ved hjælp af `TextDecoder` og tilføjer dem til `receivedDataTextarea`.
• `sendButton` Klikhændelse: Når der klikkes på knappen "Send Data", sker følgende:
  • Den henter dataene fra `dataToSendInput`-inputfeltet.
  • Den tilføjer et nylinjetegn (`\n`) til dataene. Dette er vigtigt, fordi Arduino-koden læser data, indtil et nylinjetegn modtages.
  • Den koder dataene ved hjælp af `TextEncoder` for at konvertere dem til en `Uint8Array`.
  • Den skriver de kodede data til den serielle port ved hjælp af `writer.write()`.
  • Den rydder `dataToSendInput`-inputfeltet.

Trin 4: Kør eksemplet

Åbn `index.html`-filen i din browser. Du skulle se de HTML-elementer, der er defineret i filen.

1. Klik på knappen "Connect to Serial Port". Din browser vil bede dig om at vælge en seriel port. Vælg den port, der er forbundet med dit Arduino-board.
2. Når forbindelsen er oprettet, vil knappen "Connect to Serial Port" blive deaktiveret, og knappen "Send Data" vil blive aktiveret.
3. Indtast noget tekst i inputfeltet, og klik på knappen "Send Data".
4. Du skulle se teksten "Received: [din tekst]" dukke op i tekstområdet. Dette indikerer, at dataene blev sendt succesfuldt fra browseren til Arduinoen og derefter sendt tilbage fra Arduinoen til browseren.

Avanceret brug og overvejelser

Baud rate

Baud rate er den hastighed, hvormed data overføres over den serielle port. Det er afgørende, at den baud rate, der er konfigureret i din webapplikation, matcher den baud rate, der er konfigureret i din serielle enhed (f.eks. Arduino-kode). Almindelige baud rates inkluderer 9600, 115200 og andre. Uoverensstemmende baud rates vil resultere i forvrængede eller ulæselige data.

Datakodning

Data, der overføres over den serielle port, repræsenteres typisk som en sekvens af bytes. Web Serial API bruger `Uint8Array` til at repræsentere disse bytes. Du kan få brug for at kode og afkode data ved hjælp af passende kodningsskemaer (f.eks. UTF-8, ASCII) afhængigt af den type data, du overfører.

Fejlhåndtering

Det er vigtigt at implementere korrekt fejlhåndtering i din webapplikation for at håndtere potentielle problemer som forbindelsesfejl, dataoverførselsfejl og enhedsafbrydelser. Brug `try...catch`-blokke til at fange undtagelser og give informative fejlmeddelelser til brugeren.

Flow control

Flow control-mekanismer (f.eks. hardware flow control, software flow control) kan bruges til at forhindre datatab, når afsenderen sender data hurtigere, end modtageren kan behandle dem. Web Serial API understøtter hardware flow control (CTS/RTS). Tjek de specifikke krav til din serielle enhed for at afgøre, om flow control er nødvendigt.

Lukning af porten

Det er vigtigt at lukke den serielle port korrekt, når du er færdig med at bruge den. Dette frigiver porten og giver andre applikationer eller enheder mulighed for at bruge den. Du kan lukke porten ved hjælp af `port.close()`-metoden.

            if (port) {
 await reader.cancel();
 await reader.releaseLock();
 await writer.close();
 await port.close();
}

            

              
                Copy
              
            
          

Web Serial API og Bluetooth

Selvom Web Serial API ikke direkte håndterer Bluetooth-forbindelser, kan det bruges i forbindelse med Bluetooth-seriel-adaptere. Disse adaptere fungerer som en bro, der konverterer Bluetooth-kommunikation til seriel kommunikation, som Web Serial API derefter kan håndtere. Dette åbner op for muligheder for at interagere med Bluetooth-aktiverede enheder fra din webbrowser.

Anvendelser i den virkelige verden

Web Serial API har en bred vifte af potentielle anvendelser på tværs af forskellige brancher og domæner:

• Industriel Automation: Styr og overvåg industrielt udstyr og maskiner fra en web-baseret grænseflade. For eksempel kan en fabriksarbejder i Tyskland bruge en webapplikation til at overvåge temperaturen og trykket på en maskine i realtid.
• Robotik: Interager med robotter og robotsystemer, hvilket muliggør fjernstyring og dataindsamling. Forestil dig at styre en robotarm i Japan fra et kontrolpanel i Canada.
• 3D-print: Styr og overvåg 3D-printere, hvilket giver brugerne mulighed for at uploade designs, overvåge printstatus og justere indstillinger fra en webbrowser. En bruger i Italien kunne starte et printjob på sin 3D-printer derhjemme fra sit kontor.
• IoT-enheder: Opret forbindelse til og interager med IoT-enheder såsom sensorer, aktuatorer og hjemmeautomatiseringssystemer. For eksempel kan en landmand i Brasilien overvåge jordfugtighedsniveauer og styre kunstvandingssystemer eksternt ved hjælp af en webapplikation.
• Uddannelsesværktøjer: Skab interaktive uddannelsesværktøjer og eksperimenter, der involverer fysisk hardware, hvilket gør læring mere engagerende og praktisk. Studerende i en fysikklasse kunne bruge API'en til at indsamle data fra en sensor tilsluttet et pendul.
• Tilgængelighed: Tilvejebring alternative grænseflader til enheder, der kan være svære for brugere med handicap at betjene direkte. En person med begrænset mobilitet kunne styre en smart home-enhed via en web-baseret grænseflade ved hjælp af et hovedsporingssystem.

Alternativer til Web Serial API

Selvom Web Serial API giver en bekvem måde at kommunikere med serielle enheder direkte fra browseren, findes der alternative tilgange, der kan være passende afhængigt af dine specifikke krav:

• WebUSB API: WebUSB API giver webapplikationer mulighed for at kommunikere med USB-enheder. Selvom det tilbyder større fleksibilitet og kontrol sammenlignet med Web Serial API, kræver det også en mere kompleks implementering og er muligvis ikke egnet til simple serielle kommunikationsopgaver.
• Native Applikationer med Serielle Biblioteker: Traditionelle desktop-applikationer kan bruge serielle kommunikationsbiblioteker (f.eks. libserialport, pySerial) til at interagere med serielle enheder. Denne tilgang tilbyder den største kontrol og fleksibilitet, men kræver, at brugerne installerer en native applikation på deres computer.
• Browserudvidelser: Browserudvidelser kan give adgang til serielle porte og andre hardware-ressourcer. Udvidelser kræver dog, at brugerne installerer dem separat, og de kan give anledning til sikkerhedsproblemer.
• Node.js med Serialport: At bruge Node.js på backend'en giver en meget robust løsning til at styre enheder og skabe en sikker API til din frontend. Dette giver større kontrol og sikkerhed end direkte browseradgang i mange tilfælde.

Fejlfinding af almindelige problemer

Her er nogle almindelige problemer, du kan støde på, når du arbejder med Web Serial API, og hvordan du fejlfinder dem:

• Kan ikke oprette forbindelse til seriel port:
  • Sørg for, at den serielle port ikke allerede er åben af en anden applikation.
  • Bekræft, at den korrekte serielle port er valgt i browserens prompt.
  • Tjek, at den baud rate, der er konfigureret i din webapplikation, matcher baud rate'en på den serielle enhed.
  • Sørg for, at brugeren har givet tilladelse til, at webapplikationen får adgang til den serielle port.
• Forvrængede eller ulæselige data:
  • Bekræft, at baud rates er korrekt matchet.
  • Tjek datakodningsskemaet (f.eks. UTF-8, ASCII).
  • Sørg for, at dataene sendes og modtages korrekt af den serielle enhed.
• Datatab:
  • Overvej at bruge flow control-mekanismer for at forhindre datatab.
  • Forøg bufferstørrelsen til modtagelse af data.
  • Optimer databehandlingslogikken for at undgå forsinkelser.
• Problemer med browserkompatibilitet:
  • Tjek browserkompatibiliteten for Web Serial API ved hjælp af Can I use.
  • Brug feature detection for at sikre, at API'en understøttes af browseren, før du bruger den.

Fremtiden for Web Serial API

Web Serial API repræsenterer et betydeligt skridt i retning af at bygge bro mellem nettet og den fysiske verden. Efterhånden som browserunderstøttelsen fortsætter med at vokse, og API'en udvikler sig, kan vi forvente at se endnu mere innovative applikationer dukke op, der udnytter kraften i seriel kommunikation i webapplikationer. Denne teknologi åbner døre til nye muligheder inden for IoT, industriel automation, robotik, uddannelse og mange andre områder.

Konklusion

Web Serial API giver webudviklere mulighed for at skabe applikationer, der interagerer direkte med serielle enheder, hvilket åbner op for et væld af muligheder for web-baseret styring, overvågning og dataindsamling. Denne guide giver en omfattende oversigt over API'en, herunder dens funktioner, sikkerhedsovervejelser, praktiske eksempler og fejlfindingstips. Ved at forstå og udnytte Web Serial API kan du skabe innovative og engagerende webapplikationer, der problemfrit integreres med den fysiske verden.